<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body {
			background: #f8f8f8;
			color: #222;
		}

		#sx-header {
			/*background: #fff !important;*/
		}

		.aui-btn img {
			width: 0.75rem;
		}

		.aui-title {
			/*color: #222;*/
		}

		.footer {
			width: 100%;
			display: flex;
			justify-content: center;
			overflow: hidden;
		}

		.footer .tijiao {
			margin: 0.75rem;
			margin-top: 0;
			background: #FE2C55;
			color: #fff;
			border-radius: 0.15rem;
			padding: 0.75rem 0rem;
			font-size: 0.75rem;
			text-align: center;
			width: 100%;
		}

		.info {
			background: #fff;
			margin: 0.75rem 0;
			padding: 0 0.75rem;
		}

		.info div {
			border-top: 1px solid #f3f3f3;
			padding: 0.25rem 0;
			font-size: 0.75rem;
		}

		.info div:first-child {
			border: 0;
		}

		.info div#diqu {}

		.info div#diqu:before {
			content: "\e6f5";
			position: absolute;
			right: 0.75rem;
			top: 0.75rem;
			color: #999
		}

		.info div input,#content textarea{
			height: auto;
			line-height: inherit;
			padding: 0.5rem 0;
		}

		.img_s {
			background: #fff;
			margin-top: 0.75rem;
		}

		.img_s .h4 {
			padding-left: 0.75rem;
			padding-top: 0.75rem;
			font-size: 0.75rem;
		}

		.img {
			padding: 0.75rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.img .r {
			width: 4rem;
			margin-right: 1rem;
		}

		.img .l {
			margin-left: 1rem;
			text-align: center;
		}

		.img .l div {
			color: #f00;
			font-size: 0.65rem;
			color: #999;
			padding-top: 0.5rem;
		}

		.img .l img.shangchuan {
			width: 2rem;
			/*border: 1px solid #515151;*/
			/*padding: 0.5rem;*/
			margin: 0 auto;
			opacity: 0.3
		}

		.img_list {
			margin: 0.75rem 0;
			/*margin-bottom: 5rem;
			padding-bottom: 5rem;*/
			background: #fff;
		}

		.img_list .h4 {
			padding-left: 0.75rem;
			padding-top: 0.75rem;
			font-size: 0.75rem;
		}

		.img_list .list {
			padding: 0.5rem;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.img_list .list div {
			width: 25%;
		}

		.img_list .list div img {
			padding: 0.25rem;
		}

		.img_list .list div img.shangchuan {
			opacity: 0.3;
		}

		.img .r,
		.img_list .list div {
			position: relative;
		}

		.img_list .list div em {
			position: absolute;
			top: 0rem;
			right: 0rem;
			background: #f00 url('../i/x.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 0.5rem;
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			border: 1px solid #f00;
		}
		.vid{
			margin-top: 0.75rem;
			background: #fff;
			padding: 0.75rem;
			display: flex;
			align-items: center;
			font-size: 0.75rem;
			justify-content: space-between;
		}
		.vid:before {
			content: "\e6f5";
			position: absolute;
			right: 0.75rem;
		}
		.vid span:last-child{
			padding-right: 1.5rem;
			color: #888;
			font-size: 0.65rem;
		}
	</style>
</head>

<body>
	<script id="sx-list" type="text/x-dot-template">
	<div class="info">
		<div>
			<select id="typeid">
				<option value="">请选择商品分类</option>
				{{ for(var i=0,typeid=_getPrefs('_config').typeid.a; i < typeid.length; i++) { }}
	      {{? i}}
					<option value="{{= i}}">{{= typeid[i].title}}{{= i}}</option>
				{{?}}
	    	{{ } }}
	    </select>
		</div>
		<div id="title"><input type="text" placeholder="填写商品标题" value=""></div>
		<div id="money"><input type="text" placeholder="填写商品价格，如：99.99" value=""></div>
		{{? api.pageParam['post_url']}}
		<div id="url"><input type="text" placeholder="填写分享商品网址" value=""></div>
		{{??}}
		<div id="num"><input type="tel" placeholder="填写商品库存" value=""></div>
		<div id="content"><textarea placeholder="填写商品详细"></textarea></div>
		{{?}}
	</div>
	<div class="vid aui-iconfont" {{? api.pageParam['id']}}style="margin-bottom:0.75rem;"{{?}} data-id="" tapmode onclick="_url({url:'shop_vid',title:'选择同款视频',animation:true})">
		<span>同款视频</span>
		<span>未选择</span>
	</div>
	{{? !api.pageParam['id']}}
	<div class="img_s" {{? api.pageParam['post_url']}}style="margin-bottom:0.75rem;"{{?}}>
		<div class="h4">商品封面</div>
		<div class="img">
			<div class="r aui-hide">
				<img src="../i/logo.png">
			</div>
			<div class="l" tapmode onclick="img()">
				<img src="../i/shop/shangchuan.png" class="shangchuan">
				<div>上传图片建议400*400尺寸效果更佳</div>
			</div>
		</div>
	</div>
	{{? !api.pageParam['post_url']}}
	<div class="img_list">
		<div class="h4">商品轮播图</div>
		<div class="list">
			<div tapmode onclick="img_list()"><img class="shangchuan" src="../i/shop/shangchuan.png">
			</div>
		</div>
	</div>
	{{?}}
	{{?}}
	<div class="footer">
		<div class="tijiao" tapmode onclick="data()">
			发布商品
		</div>
	</div>
	</script>
	<div id="sx-view"></div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	var img_data,img_list_data,img_data_list;
	apiready = function() {
		img_list_data=img_data_list=[];
		UIAlbumBrowser = api.require('UIAlbumBrowser');
		view();
		api.addEventListener({
				name: 'shop_add'
		}, function(ret, err) {
			if(ret.value.vid){
				vid(ret.value.vid);
			}
		});
	}
	function view(){
		var evalData = doT.template($api.html($api.byId('sx-list')));
		$api.html($api.byId('sx-view'), evalData());
		$api.fixTabBar($api.dom('.footer'))
		if(api.pageParam['id']){
			ajax();
			$('.tijiao').text('修改商品');
		}
	}
	function ajax(){
		_loading();
		_ajax('shop/user_view',function(ret,err){
			if(ret){
				if(ret.ret){
					console.log(JSON.stringify(ret))
					ret = ret.ret;
					img_data = ret.img;
					img_list_data = ret.img_list;
					$('#typeid').val(ret.typeid);
					$('#title input').val(ret.title);
					$('#money input').val(ret.money);
					$('#num input').val(ret.num);
					$('#content textarea').val(ret.content);
					if(api.pageParam['post_url']){
						$('#url input').val(ret.url);
					}else{
						$('#num input').val();
						$('#content textarea').val();
					}
					vid(ret.vid);
				}else{
					_alert(ret.err,function(ret,err){
						_close();
					})
				}
			}else{
			//	_alert(JSON.stringify(err))
			}
			_loadingCloes();
		},{id:api.pageParam['id']})
	}
	function data() {
		document.activeElement.blur();
		var data = {};
		if (api.pageParam['id']) {
			data.id = api.pageParam['id'];
		}
		var vid = $('.vid').data('id');
		if(vid){
			data.vid = vid;
		}
		data.typeid = $('#typeid').val();
		if (!data.typeid) {
			return _msg('请选择商品分类');
		}
		data.typeid = _getPrefs('_config').typeid.b[parseInt(data.typeid)];
		data.title = $('#title input').val();
		if (!data.title) {
			return _msg('请填写商品标题');
		}
		data.money = $('#money input').val();
		if (!data.money) {
			return _msg('请填写商品价格');
		}
		if (api.pageParam['post_url']) {
			data.url = $('#url input').val();
			if (!data.url) {
				return _msg('请填写商品网址');
			}
		} else {
			data.num = $('#num input').val();
			if (!data.num) {
				return _msg('填写商品库存');
			}
			data.content = $('#content textarea').val();
			if (!data.content) {
				return _msg('填写商品详细');
			}
		}
		if(!img_data){
			return _msg('请上传商品封面');
		}
		if (!api.pageParam['post_url'] && !api.pageParam['id']) {
			if(!img_data_list){
				return _msg('请上传商品轮播图');
			}
		}
		document.activeElement.blur();
		if(api.pageParam['id']){
			data.img = img_data;
			data.img_list = img_list_data
			_loading();
			return	_add(data);
		}


		_loading('正在上传图片...');
		// 上传封面图片
		_qiniu(img_data,function(ret,err){
			if (ret.status) {
				console.log(JSON.stringify(ret));
					if (ret.oper == "complete") {
						data.img = ret.info.key
						if(api.pageParam['post_url']){
							_add(data);
						}else{

							// 上传产品图片
							var img_data_list_ajax = [];
							for (var i = 0; i < img_data_list.length; i++) {
								console.log(JSON.stringify(img_data_list[i]));

								UIAlbumBrowser.transPath({
								    path: img_data_list[i].path
								}, function(rets, errs) {
								    if (rets) {
											// console.log(JSON.stringify(ret));
											if(rets.path){


												_qiniu(rets.path,function(ret,err){
													 console.log(JSON.stringify(ret));
														if (ret.oper == "complete") {
															img_data_list_ajax.push(ret.info.key);
															// console.log(img_data_list_ajax.length +":"+ img_data_list.length)
															if(img_data_list_ajax.length == img_data_list.length){
																data.img_list = img_data_list_ajax;
																console.log("img_data_list_ajax:"+JSON.stringify(img_data_list_ajax));
																_add(data);
															}
														}
												});


											}
								    } else {
								        console.log(JSON.stringify(err));
								    }
								});





							}
						}
					}
			}else{
				_loadingCloes();
				console.log(JSON.stringify(err));
				_alert('上传封面图片失败，请联系客服');
			}
		});


		console.log(JSON.stringify(data));
	}
	function _add(data){
		_ajax('shop/add', function(ret, err) {
			_loadingCloes();
			if (ret) {
				if (ret.ret) {
					_alert(ret.ret, function(ret, err) {
						_close();
					})
				} else {
					_msg(ret.err)
				}
			} else {
				//_alert(JSON.stringify(err))
			}
		}, data)
	}

	function img() {
		document.activeElement.blur();
		api.actionSheet({
			title: '上传产品封面',
			cancelTitle: '取消',
			buttons: ['拍照', '相册']
		}, function(ret, err) {
			var index = ret.buttonIndex;
			if (index != 3) {
				var sourceType = index == 1 ? 'camera' : 'album'
				api.getPicture({
					sourceType: sourceType,
					encodingType: 'jpg',
					mediaValue: 'pic',
					destinationType: 'url',
					allowEdit: false,
					quality: 100,
				}, function(ret, err) {
					console.log(JSON.stringify(ret));
					if (ret) {
						if (ret.data) {
							img_data = ret.data;
							$('.img .r img').attr('src', ret.data);
							$('.img .r').removeClass('aui-hide');
						}
					}
				});
			}
		});
	}

	function img_list() {
		document.activeElement.blur();
		UIAlbumBrowser.imagePicker({
			max: 9,
			styles: {
				bg: '#FFFFFF',
				cameraImg: _i + 'xiangce.png',
				mark: {
					icon: '',
					position: 'bottom_left',
					size: 20
				},
				nav: {
					bg: '#eee',
					cancelColor: '#333',
					cancelSize: 16,
					nextStepColor: '#333',
					nextStepSize: 16
				}
			},
			animation: true,
		}, function(ret) {
			//  alert(JSON.stringify(ret))
			// return
			if (ret.eventType == 'nextStep') {
				if (ret.list) {
					// console.log(JSON.stringify(ret.list))

					if (ret.list.length) {
						for (var i = 0; i < ret.list.length; i++) {

							img_list_data.push(ret.list[i]);
							// img_data_list.push(ret.list[i]);
							img_data_list = img_list_data

							UIAlbumBrowser.transPath({
							    path: ret.list[i].path
							}, function(rets, errs) {
							    if (rets) {
										console.log(JSON.stringify(ret));
										if(rets.path){
											$('.img_list .list').prepend('<div><img src="' + rets.path + '" ></div>');
										}
							    } else {
							        console.log(JSON.stringify(err));
							    }
							});



						}
					}
					UIAlbumBrowser.closePicker();
				}
			}else if(ret.originalPath){
				if(api.systemType == 'ios'){
					img_list_data = img_data_list = [{"path":ret.assetPath,"thumbPath":ret.originalPath}];
				}else{
					img_list_data = img_data_list = [{"path":ret.originalPath,"thumbPath":ret.originalPath}];
				}

				if (img_list_data.length) {
					for (var i = 0; i < img_list_data.length; i++) {

						UIAlbumBrowser.transPath({
								path: img_list_data[i].path
						}, function(rets, errs) {
								if (rets) {
									console.log(JSON.stringify(ret));
									if(rets.path){
										$('.img_list .list').prepend('<div><img src="' + rets.path + '" ></div>');
									}
								} else {
										console.log(JSON.stringify(err));
								}
						});

						// $('.img_list .list').prepend('<div><img src="' + img_list_data[i].thumbPath + '" ></div>');
					}
				}
			}
		});
	}

	function del(_this) {
		$(_this).remove();
	}
	function vid(id){
		if(!id){return}
		$('.vid').data('id',id);
		$('.vid span').eq(1).text('已选择');
	}
	function HtmlToText(str) {
		console.log(str)
        if (!str) {
            return "";
        }
        str = str.replace(/\n/g,'<br>');
        return str;
    }
</script>

</html>
